import React from "react";
import { FiX } from "react-icons/fi";

const TemplateModal = ({ show, templates, onSelect, onClose }) => {
  if (!show) return null;

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <button onClick={onClose} className="close-modal">
          <FiX />
        </button>
        <h2>选择模板</h2>
        <div className="template-grid">
          {templates.map((template) => (
            <div
              key={template.id}
              className="template-item"
              onClick={() => onSelect(template)}
            >
              <img
                src={template.imageUrl}
                alt={template.name}
                className="template-img"
              />
              <p>{template.name}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default TemplateModal;
